<template>
	<view class="user-info">
		<view class="user-bg"></view>
		<view class="user-content">
			<view class="avatar-wrap">
				<image :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill" class="avatar"></image>
			</view>
			<view class="info-wrap">
				<text class="nickname">{{userInfo.nickname || '未登录'}}</text>
				<text class="phone">{{userInfo.phone || '点击登录'}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
defineProps({
	userInfo: {
		type: Object,
		default: () => ({})
	}
})
</script>

<style lang="scss">
.user-info {
	position: relative;
	height: 300rpx;
	overflow: hidden;

	.user-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, #D02B29 0%, #FF6B6B 100%);
	}

	.user-content {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
	}

	.avatar-wrap {
		margin-right: 30rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.8);
	}

	.info-wrap {
		flex: 1;
	}

	.nickname {
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}

	.phone {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
	}
}
</style>
